import React from 'react'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import { DetailWrapper, Header, Content } from './style'
import { getDetailAction } from './actionCreators'

class Detail extends React.Component {

  componentDidMount(){
    this.props.getDetail(this.props.match.params.id)
  }

  render() {
    const { title, content } = this.props
    return (
      <DetailWrapper>
        <Header>{title}</Header>
        <Content dangerouslySetInnerHTML={{ __html: content }} />
      </DetailWrapper>
    )
  }
}

const mapState = (state) => {
  return {
    title: state.getIn(['detail', 'title']),
    content: state.getIn(['detail', 'content'])
  }
}

const mapDisptch = (dispatch) => ({
  getDetail(id){ dispatch(getDetailAction(id)) }
})

export default connect(mapState, mapDisptch)(withRouter(Detail))
